<template>
<div class="infinite-container appoint-history" style="top:0;" ref="scroller">
 
 <div class="visual-header">
    <mu-icon-button slot="left" @click="historyBack" style="position:absolute;">
      <i class="iconfont icon-back-copy t1"></i>
    </mu-icon-button>
    <div class="visual-title">我的预约</div>
    <select-role @liclick="selperson"></select-role>
</div>

<div v-if="appoints.length > 0">
  <div v-for="item in appoints" :key="item.id">
    <div class="appoint-card" :class="[item.payStatus > 2 ? 'theme-gray' : '']">
      <div class="appoint-card-header">
        <span class="title">{{item.doctorName || item.regDeptName}}</span>
         <!-- <small>副主任医师</small> -->
         <span class="fr t5" v-if="item.payStatus === '1'">
           剩余时间：<time-reduce :displayTime="item.regCloseTimeDisplay"></time-reduce>
         </span>
      </div>
      <mu-divider></mu-divider>
      <div class="appoint-card-content">
        <router-link :to="'/appointment/appoint-detail?regRecordId='+item.registrationId">
        <p><i class="iconfont icon-hospital"></i> 医院：{{item.orgFullName}}</p>
        <p><i class="iconfont icon-24x24xiebingli"></i> 科室：{{item.regDeptName}}</p>
        <p><i class="iconfont icon-shijian"></i> 时间：{{item.workDate +' ' + item.startTime + '-' + item.endTime}}</p>
        </router-link>
      </div>
       <mu-divider></mu-divider>
      <div class="appoint-card-footer">
        <span>{{PAY_STATUS[item.payStatus]}}</span>
        <div class="fr" v-if = "item.payStatus === '2' && item.mayCancle === '0'">
          <mu-raised-button label="取消" @click="cancelOrder(item)" class="btn-cancel" primary></mu-raised-button>
        </div>
        <div class="fr" v-else-if = "item.payStatus === '1' && item.regCloseTimeDisplay !== undefined">
          
          <mu-raised-button label="去支付" primary @click="rePay(item)"></mu-raised-button>
        </div>
        <div class="fr" v-else>
          
        </div>
      </div>
    </div>
  </div>
</div>
<div class="not-found" v-else>
  <div>暂无预约记录</div>
</div>
  <mu-infinite-scroll :scroller="scroller" :loading="loading" @load="loadMore"/>

</div>
</template>

<script>
import {
  commonAjax,
  PLATFORM_PREFIX,
  PAY_STATUS,
  PAY_URL
} from '../../api/api'
import TimeReduce from '../../components/TimeReduce'
import SelectRole from '../../components/SelectRole'
export default {
  components: {
    TimeReduce, SelectRole
  },
  data () {
    return {
      appoints: [],
      PAY_STATUS: PAY_STATUS,
      familyPerson: JSON.parse(localStorage.familyPerson || '{}'),
      pageNo: 1,
      pageSize: 25,
      loading: false,
      scroller: null,
      loadFinished: false
    }
  },
  methods: {
    historyBack () {
      window.history.back()
    },
    loadMore () {
      if (this.loadFinished) {
        return
      }
      this.pageNo++
      this.getHistoryList()
    },
    selperson (val) {
      this.familyPerson = val
      this.pageNo = 1
      this.appoints = []
      localStorage.familyPerson = JSON.stringify(val)
      this.getHistoryList()
    },
    cancelOrder (order) {
      localStorage.currentOrder = JSON.stringify(order)
      this.$router.push('/appointment/cancel-order')
    },
    reAppoint (order) {
      let dept = {
        deptId: order.deptId,
        localDeptId: order.localDeptId,
        orgId: order.orgId,
        deptName: order.deptName
      }
      localStorage.dept = JSON.stringify(dept)
      this.$router.push('/appointment/select-doctor')
    },
    rePay (order) {
      localStorage.order = JSON.stringify(order)
      // for ios pay
      if (localStorage.encCode) {
        this.$router.replace('/appointment/appoint-pay-thirdparty')
      } else {
        window.location.href = PAY_URL
      }
    },
    getHistoryList () {
      if (!this.familyPerson.mpiId) {
        this.$store.commit('UPDATE_TOAST', {message: '请先完善信息'})
        return
      }
      this.$store.commit('UPDATE_LOADING')
      commonAjax(
        [this.familyPerson.mpiId, '5', this.pageNo, this.pageSize, 1],
        `${PLATFORM_PREFIX}.registrationService`,
        'getHistoryRegprepare'
      ).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200) {
          this.appoints = this.appoints.concat(res.data.body)
          if (res.data.body < this.pageSize) {
            this.loadFinished = true
            return
          }
        } else {
          this.$store.commit('UPDATE_TOAST', {message: res.data.code + ':' + res.data.msg})
        }
      }).catch(res => {
        this.$store.commit('UPDATE_LOADING')
        this.$store.commit('UPDATE_TOAST', {
          message: '请先登录',
          fn: () => {
            this.$router.push('/login')
          }
        })
      })
    }
  },
  mounted () {
    this.$store.commit('UPDATE_HEADERSHOW')
    this.scroller = this.$refs.scroller
    this.getHistoryList()
  },
  beforeDestroy () {
    this.$store.commit('UPDATE_HEADERSHOW')
  }
}
</script>

<style lang="less">
@import '../../common/css/vars.less';
  .appoint-history {
    .appoint-card {
      background: #fff;
      margin-top: 10px;
      padding: 1em;
      border: 1px solid @color-border;
      overflow: auto;
      .appoint-card-header {
        padding-bottom: 1em;
        .title {
          color: @color-primary;
          font-size: 1.2em;
          padding-right: .6em;
        }
      }
      .appoint-card-content {
        a {
          color: #333;
        }
        p {
          margin: .7em 0;
        }
        .iconfont {
          color: @color-primary;
          font-size: 1em
        }
      }
      .appoint-card-footer {
        overflow: auto;
        padding-top: 1em;
        span{
          line-height: 3;
        }
      }

    }
    .appoint-card.theme-gray {
      color: @color-gray;
      a, .iconfont, .title{color: @color-gray;}
    }

  }
</style>
